<template>
  <div class="g-svg-selector">
    <div v-if="type === 'modal'">
      <a-popover :title="$t('请选择图标')" v-model="popoverVisible" trigger="click">
      <template slot="content">
        <svg-selector-panel @selectedIconName="updateSelectValue"/>
      </template>
      <a-input v-model="selectValue" :readonly="true" allow-clear :placeholder="$t('请选择图标')"> </a-input>
    </a-popover>
    </div>
    <svg-selector-panel v-else @selectedIconName="updateSelectValue"/>
  </div>
</template>

<script>
import SvgSelectorPanel from './svg-selector-panel.vue'
export default {
  name: 'GSvgSelector',
  components: {
    SvgSelectorPanel
  },
  model: {
    prop: 'selectValue',
    event: 'update:selectValue'
  },
  props: {
    type: {
      type: String,
      default: 'panel'
    },
    selectValue: {
      type: String,
      default: undefined
    },
  },
  data() {
    return {
      popoverVisible: false
    };
  },

  mounted() {
    
  },

  methods: {
    updateSelectValue(value) {
      this.$emit('update:selectValue', value)
      this.popoverVisible = false
    }
  }
}
</script>

<style lang="scss">

</style>